<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}

const list = ref([
  {
    id: 1,
    name: '普通餐盒 ¥1',
  },
  {
    id: 2,
    name: '大餐盒 ¥2',
  },
  {
    id: 3,
    name: '超大餐盒 ¥3',
  },
  {
    id: 4,
    name: '其他餐盒 ¥1.5',
  },
])
const value = ref([])
function noop() {}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="选择餐盒" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <wd-checkbox-group v-model="value" size="large" class="!bg-transparent">
        <wd-cell
          v-for="item in list"
          :key="item.id"
          :title="item.name"
          class="mb-[10px] rounded-lg"
        >
          <view @click.stop="noop">
            <wd-checkbox :model-value="item.id" custom-style="margin:0;" shape="square" />
          </view>
        </wd-cell>
      </wd-checkbox-group>
    </scroll-view>
    <view class="flex items-center bg-white p-4">
      <wd-button type="primary" :round="false" plain class="flex-1">添加餐盒</wd-button>
      <wd-button type="primary" :round="false" class="ml-4 flex-1">确定</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-cell-group__body) {
  background-color: transparent !important;
}
</style>
